import React, { Component } from 'react'
import {AnimalItem} from '../../types/main'
import {connect} from 'react-redux'

// interface IS

 //种类
 let types = [
    {
        name:'狗狗',
        id:1
    },
    {
        name:'猫猫',
        id:2
    },
    {
        name:'其他',
        id:3
    }
];

//性别

let sexs = [
    {
        name:'男孩',
        id:1
    },
    {
        name:'女孩',
        id:2
    },
    {
        name:'未知',
        id:3
    }
];

interface IState{
    pet_breed:number, //种类  ：1狗  2 猫 3 其他
    pet_gender:number, //性别    1.男孩  2：女孩  3.未知
    choose:string,
    pet_name:string,
    pet_age:string,
    [propName:string]:any
}

interface IProps{
    history:any,
    location:any,
    addData:(target:AnimalItem) => void
}

class Public extends Component<IProps,IState> {
    state = {
        pet_breed:1,
        pet_gender:1,
        choose:'选择品种',
        pet_name:'',
        pet_age:''
    }
    
    componentDidMount(){
        this.setState({
            choose:this.props.location.state ? this.props.location.state.spe_name : '选择品种'
        })
    }
    render() {
       
        let {pet_breed,choose,pet_name,pet_age} = this.state;

        return (
            <div>
                <div>
                    姓名: <input type="text"  value={pet_name} name="pet_name" onChange={this.change}/>
                </div>
                <div>
                    类别: {types.map(item => <span onClick={() => {
                        this.setState({
                            pet_breed:item.id,
                            choose:'选择品种' 
                        })
                    }} key={item.id}>{item.name}</span>)}
                </div>
                <div>
                    品种:{pet_breed === 3 ? <span>其他</span> :<span onClick={() => {
                        this.props.history.push('/varieties/'+pet_breed)
                    }}>{choose}</span>} 
                </div>
                <div>
                    年龄: <input type="text" value={pet_age} name="pet_age" onChange={this.change}/>
                </div>
                <div>
                    性别: {sexs.map(item => <span onClick={
                        () => {
                            this.setState({
                                pet_gender:item.id
                            })
                        }
                    } key={item.id}>{item.name}</span>)}
                </div>
                <button onClick={this.public}>发布</button>
            </div>
        )
    }

    //改变

    change = (e:any) => {
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    //发布
    public = () => {
        console.log(this.state);
        let {pet_name,pet_age,pet_breed,pet_gender,choose} = this.state;
        let target:AnimalItem = {
            id: new Date().getTime(),
            pet_name,
            pet_age,
            pet_breed,
            pet_gender,
            pet_species:choose,
            province: "\u5317\u4eac",
            city: "\u5317\u4eac\u5e02",
            county: "\u671d\u9633\u533a",
            reason: "\u4e8c\u59b9\u662f\u5c0f\u9662\u7684\u72d7\u72d7\u3002\u6bcf\u4e2a\u5c0f\u9662\u7684\u72d7\u90fd\u6e34\u671b\u4e00\u4e2a\u5bb6\uff0c\u4e00\u4e2a\u7231\u5979\u7684\u4e3b\u4eba\u3002\u5b83\u4eec\u4f1a\u5f88\u73cd\u60dc\u4e00\u4e2a\u5bb6\u7684\u673a\u4f1a\u3002\u6709\u610f\u8005\u53ef\u5148\u586b\u4e0a\u7533\u8bf7",
            image: "http:\/\/img1.goumin.com\/diary\/adopt\/201811\/13\/201811131809415575_720.jpg",
            is_video: 0,
            pet_immunity: 1,
            pet_expelling: 1,
            pet_sterilization: 1,
            pet_status: 2,
            status: 0
        };
        this.props.addData(target);
        this.props.history.push('/main')
    }
}

let stateMapToProps = () => {
    return {}
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        addData(target:AnimalItem){
            dispatch({type:'ADD_DATA',target})
        }
    }
}


export default connect(stateMapToProps,dispatchMapToProps)(Public)